import React from 'react'
import QueueAnim from 'rc-queue-anim/lib/QueueAnim'
import PubSub from 'pubsub-js/src/pubsub'
import {Icon,Modal,Button,Select,message } from 'antd'
const confirm = Modal.confirm;
import config from './../libs/config.js'

import '../styles/accounts.scss'

export default class accounts extends React.Component {
    constructor(props) {
        super(props)
        this.style = {
            nopadding: {
                padding: 0
            },
            nomargin: {
                margin: 0
            }
        },
        this.state = {
            visible: false,
            accounts: [
            ],
            user: '',
            pwd: '',
            platform: '德扑圈',
            loading: false
        }
    }
    componentDidMount() {
        var t = this;
        PubSub.publish('updateMenu','accounts')
        PubSub.publish('updateTitle','账号管理')
        PubSub.subscribe('emitAddAccount',this.addAccount)
        t.getAccounts();
    }

    deleteAccountAction = (id) => {
        var t = this;
        confirm({
            title: '您将删除账号',
            okText: '确认删除',
            onOk() {
              var hide = message.loading('加载中...',0)
              $.ajax({
                  url: config.server_host + '/api/delaccount',
                  type: 'post',
                  data: {
                      id: id
                  },
                  success: function(data) {
                      if (data.code === 200) {
                          console.log(t)
                          t.getAccounts();
                      }
                      hide()
                  }
              })
            },
            onCancel() {},
        })
    }
    addAccount = (e) => {
        this.setState({
            visible: true
        })
    }

    getAccounts=()=> {
        var t = this;
        $.ajax({
            url: config.server_host + '/api/accounts',
            type: 'get',
            success: function(data) {
                t.setState({
                    accounts: data.data
                })
            }
        })
    }

    handleOk = (e) => {
        var t = this;
        t.setState({
            loading: true
        })
        $.ajax({
            type: 'post',
            url: config.server_host + '/api/accounts',
            data: {
                u: t.state.user,
                p: t.state.pwd,
                platform: t.state.platform
            },
            success: function(data) {
                if (data.code === 200) {
                    t.setState({
                        visible: false,
                        loading: false
                    })
                    t.getAccounts();
                } else {
                    alert(data.msg)
                }
            },
            error: function() {
                t.setState({
                    visible: false,
                    loading: false
                })
            }
        })

    }
    handleCancel = (e) => {
        this.setState({
            visible: false
        })
    }

    handleSelectChange =(value) =>{
        this.setState({
            platform: value
        })
    }

    userChanged =(e)=> {
        this.setState({
            user: e.target.value
        })
    }

    pwdChanged =(e)=> {
        this.setState({
            pwd: e.target.value
        })
    }

    chooseAccount(value) {
        window.localStorage['account'] = JSON.stringify(value);
        window.location.href = "#/records"
    }

    render() {
        var t = this;
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box pkl-accounts" key="a">
                    <div className="pkl-club-title-line">我的账号</div>

                    {t.state.accounts.map(function(i) {
                        return (
                            <div className="pkl-accounts-box">
                                <div className="line" onClick={t.chooseAccount.bind(t,i)}>
                                    <div>
                                        <img className="headimg" src={i.avatar}/>
                                        <div className="name">{i.user}</div>
                                    </div>
                                    <span>{i.status ? '验证通过':'验证中'}</span>
                                </div>
                                <div className="line">
                                    <span>{i.platform}</span>
                                    <span className="pkl-btn" onClick={t.deleteAccountAction.bind(this,i._id)}>删除</span>
                                </div>
                            </div>
                        )
                    })}

                    <Modal ref="modal"
                    visible={this.state.visible}
                    title="绑定账号" onOk={this.handleOk} onCancel={this.handleCancel}
                    footer={[
                        <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取 消</Button>,
                        <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确定绑定</Button>,
                    ]}
                    >
                        <div className="pkl-form-group" style={this.style.nomargin}>
                            <div className="pkl-input-group pkl-input-group-line">
                                <Select defaultValue="德扑圈" style={{ width: "100%" }} onChange={this.handleSelectChange}>
                                  <Option value="德扑圈">德扑圈</Option>
                                  <Option value="KK扑克">KK扑克</Option>
                                  <Option value="战鱼德扑" disabled>战鱼德扑</Option>
                                </Select>
                            </div>
                            <div className="pkl-input-group pkl-input-group-line">
                                <Icon type="user" className="login_icon"/>
                                <input placeholder="账号" value={this.state.user} onChange={this.userChanged} type="text" />
                            </div>
                            <div className="pkl-input-group pkl-input-group-line" style={this.style.nomargin}>
                                <Icon type="lock" className="login_icon"/>
                                <input placeholder="密码" value={this.state.pwd} onChange={this.pwdChanged} type="password" />
                            </div>
                        </div>
                    </Modal>
                </div>
            </QueueAnim>
        )
    }
}
